<template>
  <div class="follow-panel animated " v-bind:class="{bounceIn:swiperbg.show,fadeOutUp:!swiperbg.show,none:listshow}">
    <div class="container" :class="swiperbg">
      <ul>
        <li class="xiaobozhe">
          <span class="hidden">头</span>
          <span>抽奖时间</span>
          <span>手机号</span>
          <span>奖品</span>
        </li>
        <li id="scoll">
          <ol class="scoller">
            <li><img :src="Aatrox">
              <span>2018-7-30 15:30</span>
              <span>186********</span>
              <span>100M流量</span>
            </li>
            <li><img :src="Aatrox">
              <span>2018-7-30 15:30</span>
              <span>186********</span>
              <span>100M流量</span>
            </li>
            <li><img :src="Aatrox">
              <span>2018-7-30 15:30</span>
              <span>186********</span>
              <span>100M流量</span>
            </li>
            <li><img :src="Aatrox">
              <span>2018-7-30 15:30</span>
              <span>186********</span>
              <span>100M流量</span>
            </li>
            <li><img :src="Aatrox">
              <span>2018-7-30 15:30</span>
              <span>186********</span>
              <span>100M流量</span>
            </li>
            <li><img :src="Aatrox">
              <span>2018-7-30 15:30</span>
              <span>186********</span>
              <span>100M流量</span>
            </li>
            <li><img :src="Aatrox">
              <span>2018-7-30 15:30</span>
              <span>186********</span>
              <span>100M流量</span>
            </li>
            <li><img :src="Aatrox">
              <span>2018-7-30 15:30</span>
              <span>186********</span>
              <span>100M流量</span>
            </li>
            <li><img :src="Aatrox">
              <span>2018-7-30 15:30</span>
              <span>186********</span>
              <span>100M流量</span>
            </li>
            <li><img :src="Aatrox">
              <span>2018-7-30 15:30</span>
              <span>186********</span>
              <span>100M流量</span>
            </li>
            <li><img :src="Aatrox">
              <span>2018-7-30 15:30</span>
              <span>186********</span>
              <span>100M流量</span>
            </li>
          </ol>
        </li>
      </ul>
    </div>
    <img class="close" :src="closeBtn" @click="closePanel()" alt="">
  </div>
</template>
 <script>
import '../../assets/lib/tool'
import {  getServerHost,
  preventMove,
  GetRequest} from "@/assets/lib/tool.js";
export default {
  props: ['swiperbg'],
  data() {
    return {
      wechat: require('@/assets/img/wechat.png'),
      alertl: require('@/assets/img/alert_left.png'),
      alertr: require('@/assets/img/alert_right.png'),
      closeBtn: require('@/assets/img/close.png'),
      Aatrox: require('@/assets/img/Aatrox.png'),
      listshow: false,
      scroll: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.listScroll();
    })
  },
  methods: {
    listScroll() {
      this.scroll = new iScroll('scoll', {
        vScroll: true,
        hScroll: false, //水平滚动
        hScrollbar: false,
        checkDOMChanges: true,
        hideScrollbar: true,
        beforeScrollStart: function () {
          document.addEventListener('touchmove', preventMove, { passive: false })
        }
      })
    },
    closePanel() {
      document.removeEventListener('touchmove', preventMove, { passive: false })
      this.swiperbg.show = false;
    },
  },
};
</script>
  <style lang="less" scoped>
.hidden {
  visibility: hidden;
}
.follow-panel {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 999;
  .close {
    position: relative;
    top: 100px;
    width: 70px;
  }
  .alert-left {
    position: absolute;
    left: -48px;
    top: 28px;
    width: 25%;
  }
  .alert-right {
    position: absolute;
    right: -48px;
    bottom: 28px;
    width: 25%;
  }
  .prizelist {
    background: url("../../assets/img/prize-list.png") no-repeat;
    background-size: 100% 100%;
  }
  .myprize {
    background: url("../../assets/img/my-prize.png") no-repeat;
    background-size: 100% 100%;
  }
  .container {
    position: relative;
    top: 7%;
    margin: 0 auto;
    width: 526px;
    min-height: 648px;

    ul {
      color: #fff;
      margin: 45px 30px;
      li {
        width: 100%;
        text-align: center;
      }
      > li:first-child {
        padding-top: 114px;
        font-size: 28px;
        line-height: 1.5em;
        display: flex;
        justify-content: space-around;
        span {
          color: #be2800;
        }
      }
      > li:nth-child(2) {
        overflow: hidden;
        font-size: 28px;
        height: 450px;
        ol {
          li {
            font-size: 28px;
            line-height: 1.5em;
            display: flex;
            justify-content: space-around;
            align-items: center;
            font-size: 18px;
            padding: 20px 0;
            img {
              width: 32px;
              height: 32px;
            }
            span {
              color: #333333;
            }
          }
        }
      }
    }
  }
}
</style>
  